<template>
  <div class="rd-editor-view-tools-header-bar">
    <div>ToolsHeaderBar</div>
    <div class="tools-actions-container">
      <div class="tools-actions-item" :class="[item.active ? 'active' : null, item.disable ? 'disable' : null]" :style="item.style" v-for="(item, index) in actions" :key="'tools-actions-item-' + index" :title="item.tip">
        <i :class="item.icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
import './tools-header-bar.less'

export default {
  name: 'ToolsHeaderBar',
  data() {
    return {
      actions: [
        {
          icon: 'rd-iconfont rd-icon-run',
          active: true,
          tip: 'run'
        },
        {
          icon: 'rd-iconfont rd-icon-debug',
          tip: 'debug'
        },
        {
          icon: 'rd-iconfont rd-icon-stop',
          disable: true,
          tip: 'stop'
        }
      ]
    }
  }
}
</script>
